const path = require("path")
const { VueLoaderPlugin } = require("vue-loader/dist/index")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { DefinePlugin } = require("webpack")
// 定义resolveApp函数
const resolveApp = (relativePath) => {
  return path.resolve(__dirname, relativePath);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"), // 必须是绝对路径
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader",
          {
            loader:"postcss-loader",
          }
        ],
      },
      {
        test: /\.less$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "less-loader" },
        ],
      },
      {
        test:/\.(png|jpe?g|svg|gif)$/,
        // type:"asset/inline",
        // type:"asset/resource",
        type:"asset/resource",
        generator:{
          filename:"[name]_[hash:8][ext]"
        },
        parser:{
          dataUrlCondition:{
            maxSize:100*1024
          }
        }
      },
      {
        test:/\.js$/,
        use:[
          {
            loader:'babel-loader',
            options:{
              presets:[
                "@babel/preset-env"
              ]
            }
          }
        ]
      },
      {
        test:/\.vue$/,
        use:[
          {
            loader:'vue-loader'
          }
        ]
      }
    ],
  },

  plugins:[
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title:"webpack案例",
      template:'./index.html'
    }),
    new DefinePlugin({
      "BASE_URL":"'./'"
    })
  ],

  resolve:{
    extensions:['.wasm','.mjs','.js','.json','.jsx','.ts','.vue'],
    alias:{
      "@":resolveApp("./src")
    }
  },
};